import { PROJECT_PREFIX } from './base'
import { StylesService } from './styles'

export const APP_STYLES = {
  swal2: `
/* swal2 */
.swal2-z-index-top {
  z-index: 99999 !important;
}
.swal2-actions button.btn { /* 弹窗按钮 */
  margin: 5px 20px !important;
  border-radius: 5px !important;
}

.swal2-popup {
  max-width: 850px; /* 限制最大宽度 */
  width: 90% !important; /* 响应式宽度 */
  max-height: 80vh !important; /* 限制最大高度 */
  overflow-y: auto !important; /* 内容过多时滚动 */
  margin: 0 auto !important; /* 居中显示 */
  padding-bottom: 20px !important;
  border-radius: 10px !important; /* 圆角 */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important; /* 阴影效果 */
  background-color: var(--${PROJECT_PREFIX}-theme-bg-base) !important;
  color: var(--${PROJECT_PREFIX}-theme-text-secondary) !important;
  
  ${StylesService.getInstance().scroll.default}
  
  /* 图片 */
  .swal2-image {
    margin: 32px auto !important;
    display: block !important; /* 确保图片是块级元素 */
    max-width: 100% !important; /* 防止图片溢出 */
  }
  
  /* 标题 */
  .swal2-title {
    font-size: 30px !important;
  }
  
  /* 内容 */
  .swal2-html-container {
    padding: 18px 30px 6px 30px !important;
  }
  
  /* 进度条 */
  .swal2-timer-progress-bar-container {
    .swal2-timer-progress-bar {
      background: rgb(77 159 146 / 20%) !important;
    }
  }
}
/* 确认按钮 */
.swal2-actions {
  display: flex !important;
  margin-top: 20px !important;
  align-items: center !important; /* 垂直居中 */
  justify-content: center !important; /* 水平居中 */
  
  button {
    margin: .3125em !important;
    padding: .625em 1.1em !important;
    transition: background-color 0.2s, box-shadow 0.2s;
    border: none !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0);
    font-weight: 500;
    font-size: 14px !important;
  }
}
`,
}
